<template>
  <div style="height: 100%;">
  </div>
</template>
<script>
  import Format from '@/utils/format'
  import echarts from 'echarts'
  import "echarts-gl";

  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],

    data() {
      return {
        charts: '',
        data: [],
        zList: [],
        seriesList: [],
        timerList: [],
        holeDepth: 0,
        monitorName:'三维深部位移图'
      }
    },
    computed: {
      options() {
        return {
          title: {
            text: this.monitorName,
            x: 'center'
          }, //提示框组件
          toolbox: {
            top: '20',
            right: '50',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          backgroundColor: '#fff',
          legend: {
            // data: this.timerList,
            y: 'top',
            x: 'right',
            padding: [60, 5, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            orient: 'vertical'
          },
          xAxis3D: {
            name: 'B0轴位移(mm)',
            type: 'value',
            min: function (value) {
              if (value.max > -30) {
                return -100;
              }
              return Math.ceil(value.max);//向上取整
            },
          },
          yAxis3D: {
            name: 'A0轴位移(mm)',
            type: 'value',
            min: function (value) {
              if (value.min<0) {
                return -100;
              }
              return Math.ceil(value.min);//向上取整
            },
            max: function (value) {
              if (value.max < 5) {
                return 100;
              }
              return Math.ceil(value.max);//向上取整
            },
          },
          zAxis3D: {
            name: '孔深(m)',
            type: 'value',


          },
          grid3D: {
            boxWidth: 300,
            boxHeight: 200,
            boxDepth: 200,
            axisPointer: {
              show: true,
              // label:{
              //   formatter: function (value,valueAll,index) {
              //     console.log(  valueAll)
              //     console.log('======================')
              //     valueAll.forEach((x,index)=>{
              //       if((valueAll.length)-1==index){
              //         valueAll[index]=27-x
              //
              //       }
              //       console.log(  valueAll)
              //       console.log('----------------------')
              //     })
              //     // return (Number(value).toFixed(4)) +'m'
              //   }
              // }

            },
            axisLine: {
              show: true,
              interval: 0,
              lineStyle: {
                color: '#2c3e50'
              }
            },
            viewControl: {
              distance: 400
            }
          },
          series: this.seriesList

        }
      }
    },
    methods: {
      echartResize() {
        this.charts.resize()
      },
      updateEchart(list, holeDepth,monitorName) {
        this.monitorName=monitorName+'三维深部位移图'
        this.holeDepth = holeDepth
        this.seriesList = []
        let zList = list[0]?.sbwyDetails?.map(x => x.depth) || []
        this.zList = [...zList]
        let timerList = []
        list.map((x, i) => {
          let timer = Format(new Date(x?.createTime))
          timerList.push(timer)
        })

        this.timerList = timerList
        this.data = []
        for (var t = 0; t < 1; t++) {
          var datas = [{value: [0, 0, 0], code: 0}]
          list[t]?.sbwyDetails?.map((item, index) => {
            var x = item.relativeB0
            var z = holeDepth - this.zList[index]
            var y = item.relativeA0
            datas.push({value: [x, y, z], code: item.relativeSynthesis});
          })
          let timers = Format(new Date(list[t]?.createTime))
          this.seriesList.push({
            type: 'line3D',
            animation: true,
            name: timers,
            code: t + 1,
            data: datas,
            label: {  //当type为scatter3D时有label出现
              show: true,
              position: 'top',   //标签的位置，也就是data中数据相对于线在哪个位置
              distance: 0,
              textStyle: {
                color: '#2c3e50',
                fontSize: 12,
                borderWidth: 0,
                borderColor: '#2c3e50',
                backgroundColor: 'transparent'
              }
            },
            symbol: 'circle', //折线点设置为实心点
            symbolSize: 20, //折线点的大小
            itemStyle: {
              normal: {
                color: "#1bdaf8", //折线点的颜色
                lineStyle: {
                  width: 10,
                  color: ' rgb( 238,102,102)'
                }
              }
            },

          })
        }

        this.charts.clear();

        this.options.zAxis3D.axisLabel = {
          formatter: function (value, index) { // 坐标轴文字展示样式处理
            if (holeDepth - value < 0) {
              return '0m'
            } else {
              return ((holeDepth - value).toFixed(2)) + 'm'
            }

            // return holeDepth
          }
        }
        this.options.zAxis3D.axisPointer = {
          show: true,
          label: {
            formatter: function (value, valueAll, index) {
              if (holeDepth - value < 0) {
                return '0m'
              } else {
                return ((holeDepth - value).toFixed(1)) + 'm'
              }
            }
          }

        },
          this.options.tooltip = {
            show: true,
            trigger: 'item',
            formatter: function (params) {
              var contentArr = []
              contentArr.push(params.marker)
              contentArr.push('<p style="font-size: 20px">' + '孔深:' + (holeDepth - params.value[2]) + 'm' + '</p>')
              contentArr.push('<p style="font-size: 20px">' + params.seriesName + '合成相对位移：' + params.data.code.toFixed(4) + 'mm' + '</p>')
              return contentArr.join('<br/>')
            },
            axisPointer: {
              show: false,
            }
          },
          this.charts.setOption(this.options)
        this.charts.resize()
      }
    },
    mounted() {
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      window.addEventListener('resize', this.echartResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.echartResize)
    }
  }

</script>
